<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../WEB-INF/includes/templates/generalTemplate.xhtml">
    <ui:define name="content">
        <f:event listener="#{changePasswordForgotBean.loadParametersReset()}" type="preRenderView" />
        <style>

            .top-bar2{
                border: 1px solid #eeeeee;
            }
        </style>  
        <div id="main" style="min-height:600px;width: auto;max-width:1400px;min-width: 1200px;" >
            <br/>
            <br/>
            <br/>
            <br/>
            <h:form id="userlogin_form">
                <section  id="services" class="services" >
                    <div class="row" data-view="services">
                        <div class="small-11 large-12 small-centered columns">
                            <div class="row">
                                <div class="columns large-10 large-centered">
                                    <section  class="headline">
                                        <h2 style="text-align:left;">

                                            #{tittles['page.changePasswordForgot.tittle1']}
                                        </h2>
                                        <div align="center" >
                                            <table>
                                                <thead></thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <label for="password" >#{labels['page.changePasswordForgot.password']}</label>
                                                        </td>
                                                        <td>
                                                            <p:password id="password" label="#{labels['page.changePasswordForgot.password']}" value="#{changePasswordForgotBean.password}" required="true" title="#{labels['page.changePasswordForgot.passwordexplain']}">
                                                                <f:validateLength minimum="6" />
                                                            </p:password>
                                                        </td>
                                                        <td>
                                                            <p:message for="password" id="msgpassword" display="icon"/>  
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <label for="retypepassword" >#{labels['page.changePasswordForgot.passwordconfirm']}</label>
                                                        </td>
                                                        <td>
                                                            <p:password id="retypepassword" label="#{labels['page.changePasswordForgot.passwordconfirm']}" value="#{changePasswordForgotBean.reTypePassword}" required="true" title="#{labels['page.changePasswordForgot.passwordconfirmexplain']}">  
                                                                <p:ajax update="msgretypepassword" event="blur" />  
                                                            </p:password>
                                                        </td>
                                                        <td>
                                                            <p:message for="retypepassword" id="msgretypepassword" display="icon"/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td>
                                                            <p:commandButton value="Enviar" action="#{changePasswordForgotBean.changePasswordForgotOperation}" id="changepasswordsend" ajax="false" rendered="#{changePasswordForgotBean.showResetForm}"></p:commandButton>
                                                            <p:commandButton value="Salir" id="changepasswordclose" action="index" ajax="false" immediate="true"></p:commandButton>
                                                        </td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </h:form>
        </div>
    </ui:define>
</ui:composition>